<!--
 * @Author: 郑灶欣
 * @Date: 2023-02-06 10:53:04
 * @LastEditors: 郑灶欣
 * @LastEditTime: 2023-02-24 16:44:47
 * @FilePath: \office\src\views\home\index.vue
 * @Description: 
-->
<template>
  <div class="_next">
    <bgEllipse></bgEllipse>
    <div class="mission">
      <p class="mission-p">使命</p>
      <p class="mission-desc">激发创造 <br/>丰富生活</p>
    </div>
    <div class="home-wrapper">
      <swiper class="slick-slider head-carousel" :modules="topModules" autoplay :pagination="{bulletActiveClass:'swiper-pagination-bullet2-active', clickable: true,bulletClass:'swiper-pagination-bullet2' }">
        <swiper-slide> <img class="slick-item" src="https://lf1-cdn-tos.bytescm.com/obj/static/ies/bytedance_official/_next/static/images/3-9ea22bd593086f432ab75ee6c95c37de.png" style="width:100%;display:inline-block"></swiper-slide>
        <swiper-slide> <img class="slick-item" src="https://lf1-cdn-tos.bytescm.com/obj/static/ies/bytedance_official/_next/static/images/cod-812b8e96a232cda309a0786e4f2356e3.jpeg" style="width:100%;display:inline-block"></swiper-slide>
      </swiper>
      <div class="left">
        <div>
          <p class="title">{{$t('message.corporateCulture')}}</p>
          <div class="desc">字节范是字节跳动企业文化的重要组成部分，是我们共同认可的行为准则。</div>
        </div>
        <swiper class="carousel" :modules="topModules" autoplay navigation loop>
          <swiper-slide>
            <img class="carousel-img" src="https://lf1-cdn-tos.bytescm.com/obj/static/ies/bytedance_official/_next/static/images/3-9ea22bd593086f432ab75ee6c95c37de.png" />
            <div class="carousel-bottom">
              <div class="carousel-title">总是创业</div>
              <ul>
                <li>报错ask大家分厘卡撒酒疯萨芬</li>
                <li>报错ask大家分厘卡撒酒疯萨芬</li>
                <li>报错ask大家分厘卡撒酒疯萨芬</li>
              </ul>
            </div>
          </swiper-slide>
          <swiper-slide>
            <img class="carousel-img" src="https://lf1-cdn-tos.bytescm.com/obj/static/ies/bytedance_official/_next/static/images/3-9ea22bd593086f432ab75ee6c95c37de.png" />
            <div class="carousel-bottom">
              <div class="carousel-title">总是创业</div>
              <ul>
                <li>报错ask大家分厘卡撒酒疯萨芬</li>
                <li>报错ask大家分厘卡撒酒疯萨芬</li>
                <li>报错ask大家分厘卡撒酒疯萨芬</li>
              </ul>
            </div>
          </swiper-slide>
        </swiper>
      </div>
      <div class="left">
        <div class="carousel">
          <img class="carousel-img" src="https://lf1-cdn-tos.bytescm.com/obj/static/ies/bytedance_official/_next/static/images/3-9ea22bd593086f432ab75ee6c95c37de.png" />
        </div>
        <div>
          <p class="title">{{$t('message.corporateCulture')}}</p>
          <div class="desc">字节范是字节跳动企业文化的重要组成部分，是我们共同认可的行为准则。</div>
        </div>
      </div>
      <div class="outs">
        <p class="title ">{{$t('message.ContractOurs')}}</p>
        <div class="info">
          <div class="outs-info">
            {{$t('message.newNI')}}<br />
            <span class="detail">gongguan@bytedance.com</span>
          </div>
          <div class="outs-info">
            {{$t('message.newNI')}}<br />
            <span class="detail">gongguan@bytedance.com</span>
          </div>
          <div class="outs-info">
            {{$t('message.newNI')}}<br />
            <span class="detail">gongguan@bytedance.com</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import bgEllipse from "@/components/bg-ellipse.vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Autoplay, Navigation, Pagination, Scrollbar, A11y } from "swiper";
import "swiper/css";
import "swiper/css/autoplay";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/scrollbar";
const topModules = [Autoplay, Navigation, Pagination, Scrollbar, A11y];
</script>
<style lang="scss">
.swiper-pagination-bullet2 {
  width: 20px;
  height: 20px;
  display: inline-block;
  border-radius: 50%;
  margin: 10px;
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
  border: 2px solid $white-color !important;
}
.swiper-pagination-bullet2-active {
  width: 20px;
  height: 20px;
  display: inline-block;
  border-radius: 50%;
  margin: 10px;
  background: $white-color;
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.4);
}
</style>
<style scoped lang="scss">
.mission {
  left: 0;
  border-radius: 0 0 8rem;
  position: absolute;
  z-index: 9;
  left: 9vw;
  background: #fff;
  padding:15vh 5rem 0 3rem;
  top: 0;
  &-p{
    color: #999;
    font-size: 1.6rem;
  }
  &-desc{
    font-size: 3.8rem;
    margin-top: 0;
    color: #333;
    line-height: 4rem;
  }
}
.outs {
  margin-left: 10%;
  margin-top: 10vw;
  margin-bottom: 10vw;
}
.info {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}
.outs-info {
  width: 45%;
  font-weight: bold;
  font-size: 1.5rem;
  line-height: 2rem;
  margin-bottom: 5vw;
  .detail {
    font-size: 1rem;
    color: $main-text-color2;
  }
}
.carousel {
  width: 56.5%;
  overflow: hidden;
  margin-left: 40px;
  margin-right: 40px;
  flex-shrink: 0;
  border-radius: 18px;
}
.carousel-img {
  width: 100%;
  height: 500px;
}
.carousel-title {
  font-size: 2rem;
  font-weight: bold;
}
.carousel-bottom {
  margin-top: 20px;
  margin-left: 15%;
  li {
    line-height: 38px;
    font-size: 1.2rem;
    font-weight: normal;
  }
}
.left {
  width: 80%;
  margin: auto;
  display: flex;
  flex-direction: row;
  margin-top: 190px;
}
.title {
  font-size: 3rem;
  font-weight: bold;
  line-height: 4rem;
}
.desc {
  margin-top: 8vw;
  font-size: 1.5rem;
}
.head-carousel {
  width: 100%;
  height: calc(51vw + 1.01rem);
  min-height: 5.5rem;
  max-height: 100vh;
  background: cadetblue;
  overflow-y: hidden;
}
@media screen and (max-width: 750px) {
  .mission {
    left: 0;
    border-radius: 0 0 3rem;
    position: absolute;
    z-index: 9;
    left: 9vw;
    background: #fff;
    padding:11vh 3rem 0 2rem;
    top: 0;
    &-p{
      color: #999;
      font-weight: bold;
      font-size: 1rem;
    }
    &-desc{
      font-size: 1.3rem;
      margin-top: 0;
      color: #333;
      font-weight: bold;
      line-height: 1.5rem;
    }
  }
  .head-carousel {
    width: 100%;
    height: 100vw;
  }
  .left {
    width: 90%;
    flex-wrap: wrap;
    margin-top: 60px;
  }
  .carousel {
    width: 100%;
    margin: 20px 0;
  }
  .carousel-img {
    width: 100%;
    height: 250px;
  }
  .carousel-bottom {
    margin-top: 20px;
    margin-left: 5%;
    li {
      line-height: 38px;
      font-size: 1.2rem;
      font-weight: normal;
    }
  }
  .outs-info {
    width: 80%;
  }
}
.slick-item {
  height: 100%;
  width: 100%;
}
.home-wrapper {
  margin-top: -0.1rem !important;
  overflow: hidden;
}
._next {
  position: relative;
  width: 100%;
  overflow: hidden;
}
</style>
